<style>
  .twy-agot-banner-with-text .banner-with-text-container {
    top: 100px;
  }
  .banner-with-text-container .product-text__wrapper p {
    margin: 0;
  }
  .banner-with-text-container .product-text__wrapper .text-pre-title {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    opacity: 1;
    color: #FFFFFF;
  }
  .banner-with-text-container .product-text__wrapper .text-title {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    color: #FFFFFF;
  }
  
  .banner-with-text-container .product-text__wrapper .text-desc{
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
  }
  .twy-agot-banner-with-text .bg-image {
    height: 100vh;
    overflow: hidden;
  }
  
  @media screen and (max-width: 750px) {
    .twy-agot-banner-with-text .banner-with-text-container {
      padding: 0;
      top: 50px;
    }
    .banner-with-text-container .product-text__wrapper .text-pre-title {
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 24px;
      opacity: 1;
      color: #FFFFFF;
    }
    .banner-with-text-container .product-text__wrapper .text-title {
      font-style: normal;
      font-weight: 700;
      font-size: 24px;
      line-height: 32px;
      padding: 8px 0;
      color: #FFFFFF;
    }
    
    .banner-with-text-container .product-text__wrapper .text-desc{
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 24px;
      text-align: center;
      color: #FFFFFF;
    }
  }
</style>
<div class="twy-agot-banner-with-text {% if section.settings.include_margins %}page-width{% endif %}">
  <div class="product-with-image fill-width" id="banner-with-text-wrapper">
    <div class="product-text banner-with-text-container">
      <div class="text page-width">
        <div class="product-text__wrapper">
          <p class="text-pre-title">{{ section.settings.text1 }}</p>
          <p class="text-title">{{ section.settings.text2 }}</p>
          <p class="text-desc">{{ section.settings.text3 }}</p>
        </div>
      </div>
    </div>
    <div class="bg-image">
      <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      {%- if section.settings.image != blank -%}
        <img
          srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
          src="{{ section.settings.image | img_url: '1500x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
          alt="{{ section.settings.image.alt | escape }}"
          loading="lazy"
          width="{{ section.settings.image.width }}"
          height="{{ section.settings.image.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
      </div>
      <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      {%- if section.settings.image_mobile != blank -%}
        <img
          srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
          src="{{ section.settings.image_mobile | img_url: '1500x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
          alt="{{ section.settings.image_mobile.alt | escape }}"
          loading="lazy"
          width="{{ section.settings.image_mobile.width }}"
          height="{{ section.settings.image_mobile.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
      </div>
    </div>
  </div>
</div>

<script>
  $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }

    function initScrollMagic() {
      const tenwaysAgot = document.querySelector("#banner-with-text-wrapper");
      const AgoxController = new ScrollMagic.Controller();
      const tl = new TimelineMax();
      
      tl.fromTo(
        '.banner-with-text-container',
        1,
        {
          autoAlpha: 0,
          opacity: 0,
          yPercent: '70%',
        },
        {
          autoAlpha: 1,
          opacity: 1,
          yPercent: '0%',
          ease: Linear.easing
        },
      )
      
      let scene6 = new ScrollMagic.Scene({
        duration: '300',
        triggerElement: tenwaysAgot,
        triggerHook: 0
      })
      .setTween(tl)
      .setPin(tenwaysAgot)
      .addTo(AgoxController); 
    }

    if( !tooSmall ) {
      initScrollMagic();
    }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( AgoxController !== null && AgoxController !== undefined ) {
          AgoxController = AgoxController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( AgoxController === null || AgoxController === undefined ) {
          initScrollMagic();
        }
      }
    });
  })
</script>

{% schema %}
{
  "name": "Twy Agot Banner With Text",
  "tag": "section",
  "class": "background-images spaced-section--full-width twy-agot-banner-with-text-container",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Mobile image"
    },
    {
      "type": "text",
      "id": "text1",
      "label": "text1"
    },
    {
      "type": "text",
      "id": "text2",
      "label": "Heading"
    },
    {
      "type": "text",
      "id": "text3",
      "label": "text2"
    }
  ],
  "presets": [
    {
      "name": "Twy Agot Banner With Text"
    }
  ]
}
{% endschema %}
